import React, { useEffect, useState } from "react";
import style from "./style.module.scss";
import { MyNavBar, UserVideoBuyItem } from "../../../components";
import { useNavigate } from "react-router-dom";
import emptyImg from "../../../assets/images/image/hdpi/no_message.png";
import { useBoolean } from "ahooks";
import { useAppSelector } from "../../../store/hooks";
import {
  getUserInfoCollectionList,
  getUserSickCollectionList,
  getVideoCollectionList,
} from "../../../api/my";
import { List } from "react-vant";
import { MyThumbnail } from "../../../components/myThumbnail";
import { MyThumbnail3 } from "../../../components/myThumbnail3";
import { MyThumbnail1 } from "../../../components/myThumbnail1";
import UserPatientCircleItem from "../../../components/userPatientCircleItem";

// 用户资讯收藏列表类型
interface patientListRawState {
  id: string;
  infoId: string;
  thumbnail: string[];
  title: string;
  doctor: string;
  createTime: number;
}

// 用户收藏健康课堂视频列表类型
interface videoListRawState {
  id: number;
  videoId: number;
  title: string;
  shearUrl: string;
  originalUrl: string;
  price: number;
  duration: number;
  whetherBuy: number;
  buyNum: number;
  createTime: number;
}

// 用户收藏病友圈列表类型
interface patientCircleListRawState {
  id: number;
  sickCircleId: number;
  title: string;
  disease: string;
  createTime: number;
  collectionNum: number;
  commentNum: number;
}

// 头部导航
interface collectionListRawState {
  title: string;
  id: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();

  // 头部导航
  const [collectionList] = useState<collectionListRawState[]>([
    {
      title: "健康咨询",
      id: 7001,
    },
    {
      title: "健康视频",
      id: 7002,
    },
    {
      title: "病友圈",
      id: 7003,
    },
  ]);
  // 头部导航 默认值
  const [active, setActive] = useState<number>(7001);

  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);

  // 是否加载完毕
  const [finish, { setTrue, setFalse }] = useBoolean(false);

  // 用户资讯收藏列表 默认第一页 consultIndex=1
  const [consultIndex, setConsultIndex] = useState(1);
  // 用户资讯收藏列表
  const [consultList, setConsultList] = useState<patientListRawState[]>([]);
  // 获取用户资讯收藏列表
  const getConsultList = async () => {
    const resp = await getUserInfoCollectionList(
      consultIndex,
      5,
      userId,
      sessionId
    );
    // 是否存在更多数据
    if (resp.result.length > 0) {
      resp.result.forEach((v) => {
        v.thumbnail = v.thumbnail.split(";");
      });
      if (consultIndex === 1) {
        setConsultList(resp.result);
      } else {
        setConsultList([...consultList, ...resp.result]);
      }
      setConsultIndex(consultIndex + 1);
    } else {
      // 请求完成 没有更多数据
      setTrue();
    }
  };

  // 用户收藏健康课堂视频列表 默认第一页 videoIndex=1
  const [videoIndex, setVideoIndex] = useState(1);
  // 用户收藏健康课堂视频列表
  const [videoList, setVideoList] = useState<videoListRawState[]>([]);
  // 获取用户收藏健康课堂视频列表
  const getvideoList = async () => {
    const resp = await getVideoCollectionList(videoIndex, 5, userId, sessionId);
    console.log(new Date().getTime());
    console.log("resp", resp);
    // 是否存在更多数据
    if (resp.result.length > 0) {
      if (videoIndex === 1) {
        setVideoList(resp.result);
      } else {
        setVideoList([...videoList, ...resp.result]);
      }
      setVideoIndex(videoIndex + 1);
    } else {
      // 请求完成 没有更多数据
      setTrue();
    }
  };

  // 用户收藏病友圈列表 默认第一页 patientCircleIndex=1
  const [patientCircleIndex, setPatientCircleIndex] = useState(1);
  // 用户收藏病友圈列表
  const [patientCircleList, setPatientCircleList] = useState<
    patientCircleListRawState[]
  >([]);
  // 获取用户收藏病友圈列表
  const getPatientCircleList = async () => {
    const resp = await getUserSickCollectionList(
      patientCircleIndex,
      5,
      userId,
      sessionId
    );
    // 是否存在更多数据
    if (resp.result.length > 0) {
      if (patientCircleIndex === 1) {
        setPatientCircleList(resp.result);
      } else {
        setPatientCircleList([...patientCircleList, ...resp.result]);
      }
      setPatientCircleIndex(patientCircleIndex + 1);
    } else {
      // 请求完成 没有更多数据
      setTrue();
    }
  };

  // 收藏空空如也
  const EmptyCollection: React.FC = () => {
    return (
      <div className={style.EmptyCollection}>
        <div className={style.empty}>
          <img src={emptyImg} alt="" />
          <div>收藏空空如也</div>
        </div>
      </div>
    );
  };

  useEffect(() => {
    setFalse();
    if (active === 7001) {
      getConsultList();
    } else if (active === 7002) {
      getvideoList();
    } else {
      getPatientCircleList();
    }
  }, [active]);

  return (
    <div className={style.collection}>
      <MyNavBar
        title="我的收藏"
        style={{ backgroundColor: "#fff" }}
        onClickLeft={() => navigate("/my")}
      ></MyNavBar>
      {/* 头部tab */}
      <div className={style.tabs}>
        {collectionList.map((item) => {
          return (
            <div
              key={item.id}
              className={`${style.tabsItem} ${
                active === item.id ? style.tabsActive : ""
              }`}
              onClick={() => setActive(item.id)}
            >
              {item.title}
            </div>
          );
        })}
      </div>
      {/* 收藏内容 */}

      {
        // 健康咨询
        active === 7001 && (
          <List
            finished={finish}
            onLoad={getConsultList}
            finishedText="没有更多数据了"
            className={style.collectionConent}
          >
            {consultList.length !== 0 ? (
              <div>
                {consultList.map((item) => {
                  if (item.thumbnail.length === 1) {
                    return (
                      <MyThumbnail1
                        infoId={item.infoId}
                        title={item.title}
                        thumbnail={item.thumbnail}
                        doctor={item.doctor}
                        createTime={item.createTime}
                        key={item.id}
                      ></MyThumbnail1>
                    );
                  } else if (item.thumbnail.length === 3) {
                    return (
                      <MyThumbnail3
                        infoId={item.infoId}
                        title={item.title}
                        thumbnail={item.thumbnail}
                        doctor={item.doctor}
                        createTime={item.createTime}
                        key={item.id}
                      ></MyThumbnail3>
                    );
                  } else {
                    return (
                      <MyThumbnail
                        title={item.title}
                        infoId={item.infoId}
                        createTime={item.createTime}
                        doctor={item.doctor}
                        key={item.id}
                      ></MyThumbnail>
                    );
                  }
                })}
              </div>
            ) : (
              <EmptyCollection></EmptyCollection>
            )}
          </List>
        )
      }
      {
        // 健康视频
        active === 7002 && (
          <List
            finished={finish}
            onLoad={getvideoList}
            finishedText="没有更多数据了"
            className={style.collectionConent}
          >
            {videoList.length !== 0 ? (
              <div>
                {videoList.map((item) => {
                  return (
                    <UserVideoBuyItem
                      onUpdate={() => getvideoList()}
                      type="collection"
                      key={item.id}
                      collectionItem={item}
                    ></UserVideoBuyItem>
                  );
                })}
              </div>
            ) : (
              <EmptyCollection></EmptyCollection>
            )}
          </List>
        )
      }
      {active === 7003 && (
        <div className={style.collectionConent}>
          {patientCircleList.length !== 0 ? (
            <div>
              {patientCircleList.map((item, ind) => {
                return (
                  <UserPatientCircleItem
                    ind={ind}
                    patientCircleItem={item}
                    key={item.id}
                  ></UserPatientCircleItem>
                );
              })}
            </div>
          ) : (
            <EmptyCollection></EmptyCollection>
          )}
        </div>
      )}
    </div>
  );
};

export default Index;
